<template>
  <view>
    <view>Vue 组件</view>
    <view class="click-test-page" @click="onPageClick">click-test</view>
    <slot-scope-test :text="'click-test'">
      <template v-slot="{text}">
        <view class="click-test-page" @click="onPageClick">{{text}}</view>
      </template>
    </slot-scope-test>
    <child-test>
      <view class="click-test-page" @click="onPageClick">click-test</view>
    </child-test>
    <child-test>
      <child-test>
        <view class="click-test-page" @click="onPageClick">click-test</view>
      </child-test>
    </child-test>
    <child-test>
      <slot-scope-test :text="'click-test'">
        <template v-slot="{text}">
          <view class="click-test-page" @click="onPageClick">{{text}}</view>
          <child-test>
            <view class="click-test-page" @click="onPageClick">click-test</view>
          </child-test>
          <slot-scope-test :text="'click-test'">
            <template v-slot="{text}">
              <view class="click-test-page" @click="onPageClick">{{text}}</view>
            </template>
          </slot-scope-test>
        </template>
      </slot-scope-test>
    </child-test>
    <child-test>
      <child-test>
        <slot-scope-test :text="'click-test'">
          <template v-slot="{text}">
            <view class="click-test-page" @click="onPageClick">{{text}}</view>
          </template>
        </slot-scope-test>
      </child-test>
    </child-test>
    <child-test2></child-test2>
    <view>小程序组件</view>
    <custom-event class="custom-event1" @test1="onTest">click-test</custom-event>
    <custom-event class="custom-event2" @test2="onTest">click-test</custom-event>
    <custom-event class="custom-event3" @test2="onTest($event)">click-test</custom-event>
    <custom-event class="custom-event4" @test1="onTest({detail:'test'})">click-test</custom-event>

    <view @click=""></view>
    <view @click.stop></view>
  </view>
</template>

<script>
import childTest from './child-test'
import childTest2 from './child-test2'
import slotScopeTest from './slot-scope-test'

export default {
  components: {
    childTest,
    childTest2,
    slotScopeTest
  },
  data () {
    return {
      index: 0,
      eventDetail: ''
    }
  },
  methods: {
    onPageClick (event) {
      console.log('onPageClick:', event)
      this.index++
      return event
    },
    onTest ({ detail }) {
      console.log('onTest:', detail)
      this.eventDetail = detail
    }
  }
}
</script>

<style>
</style>